<template>
	<view class="container">
		<!-- Banner Swiper -->
		<swiper class="banner" :indicator-dots="true" :indicator-color="'rgba(255,255,255,0.4)'" :indicator-active-color="'#FFFFFF'" :autoplay="true" :interval="3000" :duration="500">
			<swiper-item v-for="(item, index) in banners" :key="index">
				<image :src="item.image" mode="aspectFill" class="banner-img" @click="navigateTo(item.url)"></image>
				<view class="banner-text-overlay">
					<text class="banner-title">{{ item.title }}</text>
					<text class="banner-desc">{{ item.desc }}</text>
				</view>
			</swiper-item>
		</swiper>

		<!-- Category Navigation -->
		<view class="category-section">
			<view class="category-item" v-for="(category, index) in categories" :key="index" @click="navigateTo(category.url)">
				<view class="category-icon-wrapper" :style="{ backgroundColor: category.bgColor }">
					<image :src="category.image" mode="aspectFit" class="category-icon"></image>
				</view>
				<text class="category-name">{{ category.name }}</text>
			</view>
		</view>

		<!-- Popular Courses -->
		<view class="section-header">
			<view class="section-title-wrapper">
				<view class="section-title-line"></view>
				<text class="section-title">热门课程</text>
			</view>
			<text class="more" @click="navigateTo('/pages/resources/resources')">查看全部</text>
		</view>

		<scroll-view scroll-x class="course-scroll">
			<view class="course-list">
				<view class="course-item" v-for="(course, index) in popularCourses" :key="index" @click="openInBrowser(course.url)">
					<image :src="course.img" mode="aspectFill" class="course-image"></image>
					<view class="course-info">
						<text class="course-name">{{ course.title }}</text>
						<view class="course-meta">
							<view class="teacher-info">
								<image class="teacher-avatar" :src="course.teacherAvatar"></image>
								<text class="teacher">{{ course.author }}</text>
							</view>
							<view class="course-stats">
								<text class="stats-item">
									<text class="iconfont icon-user"></text>
									{{ course.watchNumber }}
								</text>
								<text class="stats-item">
									<text class="iconfont icon-star"></text>
									{{ course.score }}
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- Educational Resources -->
		<view class="section-header">
			<view class="section-title-wrapper">
				<view class="section-title-line"></view>
				<text class="section-title">精选资源</text>
			</view>
			<text class="more" @click="navigateTo('/pages/resources/resources')">查看全部</text>
		</view>

		<view class="resource-grid">
			<view class="resource-item" v-for="(resource, index) in featuredResources" :key="index" @click="navigateTo(resource.url)">
				<view class="resource-icon-wrapper" :style="{ backgroundColor: resource.bgColor }">
					<image :src="resource.image" mode="aspectFit" class="resource-icon"></image>
				</view>
				<view class="resource-info">
					<text class="resource-name">{{ resource.name }}</text>
					<text class="resource-desc">{{ resource.desc }}</text>
				</view>
			</view>
		</view>
		
		<!-- Recommended for You -->
		<view class="section-header">
			<view class="section-title-wrapper">
				<view class="section-title-line"></view>
				<text class="section-title">推荐给你</text>
			</view>
		</view>
		
		<view class="recommendation-card">
			<image src="/static/rec_bg.jpg" mode="aspectFill" class="rec-background"></image>
			<view class="rec-content">
				<text class="rec-title">基于你的学习记录</text>
				<text class="rec-course-name">数据分析与可视化</text>
				<text class="rec-desc">掌握数据分析基础技能，从入门到精通</text>
				<button class="rec-button" @click="navigateToCourse(5)">立即学习</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import http from '@/utils/request';

// 状态变量
const banners = ref([
	{ 
		image: '/static/banner1.jpg', 
		url: '/pages/course/course?id=1',
		title: '人工智能基础课程',
		desc: '零基础入门AI世界' 
	},
	{ 
		image: '/static/banner2.jpg', 
		url: '/pages/resources/resources',
		title: '海量学习资源',
		desc: '免费获取优质教材'
	},
	{ 
		image: '/static/banner3.jpg', 
		url: '/pages/profile/profile',
		title: '个性化学习体验',
		desc: '定制你的学习计划'
	}
]);

const categories = ref([
	{ name: '在线课程', image : '/static/icon/course.png', url: '/pages/course/course-list', bgColor: '#E3F2FD' },
	{ name: '习题练习', image : '/static/icon/exercise.png', url: '/pages/resources/exercises', bgColor: '#E8F5E9' },
	{ name: '学习资料', image : '/static/icon/material.png', url: '/pages/resources/materials', bgColor: '#FFF3E0' },
	{ name: '互动教学', image : '/static/icon/InteractiveTeaching.png', url: '/pages/resources/materials', bgColor: '#FFF3E0' },
	
	
]);

const popularCourses = ref([]);

// 获取热门课程数据
async function fetchPopularCourses() {
	try {
		console.log('开始请求热门课程数据...');
		const res = await http.get('/android/overallScoring/getHot');
		console.log('获取到的热门课程数据：', res);
		
		
			popularCourses.value = res.data
			
		
			console.log('处理后的课程数据：', popularCourses.value);
		 
	} catch (error) {
		console.error('获取热门课程失败:', error);
		uni.showToast({
			title: '获取课程数据失败',
			icon: 'none'
		});
	}
}


// 打开浏览器访问链接
function openInBrowser(url) {

	plus.runtime.openURL(url);
}

// 在组件挂载时获取数据
onMounted(() => {
	fetchPopularCourses();
});

const featuredResources = ref([
	{ 
		name: '经典教材电子书', 
		desc: '海量教材资源免费获取', 
		image: '/static/icon/E-Books.png', 
		url: '/pages/resources/ebooks',
		bgColor: '#E3F2FD'
	},
	{ 
		name: '名师讲座视频', 
		desc: '顶尖学者分享知识', 
		image: '/static/icon/lecturer.png', 
		url: '/pages/resources/videos',
		bgColor: '#E8F5E9'
	},
	{ 
		name: '智能问答', 
		desc: 'AI助手解答学习难题', 
		image: '/static/icon/ai.png', 
		url: '/pages/resources/ai-qa',
		bgColor: '#FFF3E0'
	},
	{ 
		name: '在线习题库', 
		desc: '覆盖各学科核心知识点', 
		image: '/static/icon/exercise.png', 
		url: '/pages/resources/exercises',
		bgColor: '#F3E5F5'
	}
]);

// 方法
function navigateTo(url) {
	uni.navigateTo({
		url: url
	});
}

function navigateToCourse(id) {
	uni.navigateTo({
		url: `/pages/course/course?id=${id}`
	});
}
</script>

<style>
	.container {
		padding: 30rpx;
		background-color: #F8F9FA;
	}

	/* Banner Styles */
	.banner {
		width: 100%;
		height: 360rpx;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 40rpx;
	}

	.banner-img {
		width: 100%;
		height: 100%;
	}
	
	.banner-text-overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 40rpx;
		background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
		color: #fff;
	}
	
	.banner-title {
		font-size: 36rpx;
		font-weight: 600;
		margin-bottom: 8rpx;
	}
	
	.banner-desc {
		font-size: 26rpx;
		opacity: 0.9;
	}

	/* Category Styles */
	.category-section {
		display: flex;
		justify-content: space-between;
		margin-bottom: 50rpx;
	}

	.category-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 160rpx;
	}

	.category-icon-wrapper {
		width: 100rpx;
		height: 100rpx;
		background-color: #fff;
		border-radius: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 16rpx;
		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.05);
		transition: transform 0.3s ease;
	}

	.category-icon {
		width: 60rpx;
		height: 60rpx;
	}

	.category-item:hover .category-icon-wrapper {
		transform: translateY(-6rpx);
	}

	.category-name {
		font-size: 26rpx;
		color: #333;
		font-weight: 500;
	}

	/* Section Header Styles */
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
	}
	
	.section-title-wrapper {
		display: flex;
		align-items: center;
	}
	
	.section-title-line {
		width: 6rpx;
		height: 30rpx;
		background-color: #007AFF;
		margin-right: 16rpx;
		border-radius: 6rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.more {
		font-size: 26rpx;
		color: #007AFF;
	}

	/* Course List Styles */
	.course-scroll {
		width: 100%;
		white-space: nowrap;
		margin-bottom: 50rpx;
	}
	
	.course-list {
		display: inline-flex;
		padding: 10rpx 10rpx 20rpx 10rpx;
	}

	.course-item {
		width: 300rpx;
		margin-right: 24rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.05);
		transition: transform 0.3s ease;
		position: relative;
	}
	
	.course-item:hover {
		transform: translateY(-6rpx);
	}

	.course-image {
		width: 100%;
		height: 180rpx;
	}
	
	.course-info {
		padding: 16rpx;
	}

	.course-name {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 12rpx;
		display: block;
		white-space: normal;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		height: 80rpx;
	}

	.course-meta {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}
	
	.teacher-info {
		display: flex;
		align-items: center;
	}
	
	.teacher-avatar {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		margin-right: 8rpx;
	}

	.teacher {
		font-size: 24rpx;
		color: #666;
	}
	
	.course-stats {
		display: flex;
		justify-content: space-between;
	}
	
	.stats-item {
		font-size: 22rpx;
		color: #999;
	}

	/* Resource Grid Styles */
	.resource-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 24rpx;
		margin-bottom: 50rpx;
	}

	.resource-item {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 24rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.05);
		transition: transform 0.3s ease;
	}
	
	.resource-item:hover {
		transform: translateY(-6rpx);
	}

	.resource-icon-wrapper {
		width: 80rpx;
		height: 80rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 20rpx;
	}

	.resource-info {
		flex: 1;
	}

	.resource-name {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 6rpx;
	}

	.resource-desc {
		font-size: 22rpx;
		color: #999;
		white-space: normal;
	}
	
	/* Recommendation Styles */
	.recommendation-card {
		position: relative;
		height: 240rpx;
		border-radius: 24rpx;
		overflow: hidden;
		margin-bottom: 40rpx;
	}
	
	.rec-background {
		position: absolute;
		width: 100%;
		height: 100%;
	}
	
	.rec-content {
		position: relative;
		padding: 30rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: white;
		background: linear-gradient(to right, rgba(0,0,0,0.7), transparent);
	}
	
	.rec-title {
		font-size: 24rpx;
		opacity: 0.9;
		margin-bottom: 10rpx;
	}
	
	.rec-course-name {
		font-size: 36rpx;
		font-weight: 600;
		margin-bottom: 10rpx;
	}
	
	.rec-desc {
		font-size: 26rpx;
		opacity: 0.9;
		margin-bottom: 20rpx;
		width: 70%;
	}
	
	.rec-button {
		align-self: flex-start;
		background-color: #007AFF;
		color: white;
		font-size: 26rpx;
		padding: 12rpx 30rpx;
		border-radius: 50rpx;
		line-height: 1.5;
	}
	
	/* Placeholder for iconfont - You need to add the actual font file */
	.iconfont {
		font-size: 40rpx;
		color: #007AFF;
	}
	
	.icon-user, .icon-star {
		font-size: 24rpx;
		margin-right: 4rpx;
	}

	.resource-icon {
		width: 48rpx;
		height: 48rpx;
	}
</style>
